<template>
  <div class="exception-page">
    <div class="img">
      <img :src="config[type].img" />
    </div>
    <div class="content">
      <h1>{{ config[type].title }}</h1>
      <div class="desc">{{ config[type].desc }}</div>
      <div v-if="config[type].title==='403'" class="ex-notice">
        <h3  class="desc">AHM系统权限开通方法</h3>
      <p>
        1、进入海技工程网，菜单路径：维修工程->信息系统变更申请，如下截图：
        <div class="d-flex e403-img-box">
          <img src="@/assets/img/v2.jpg" alt="" @click="checkImgHandler(1)">
          <img src="@/assets/img/v1.jpg" alt=""  @click="checkImgHandler(2)">
        </div>  
        </p>
      <p>2、直接访问地址：
        <a href="http://gcat.hnair.net/HNAME/DataManage/Index.aspx?flag=5" target="_blank" rel="noopener noreferrer">
          http://gcat.hnair.net/HNAME/DataManage/Index.aspx?flag=5</a> 
        </p>
      <p>3、进入“信息系统变更申请”界面，选择“信息系统权限申请”下“我的申请”，界面有具体操作说明，需要补充说明：我的申请界面中，涉及系统：AHM系统，系统模块：系统权限申请。</p>
      </div>
      <div class="action">
          <!-- <a-button type="primary" @click="backHome">返回首页</a-button> -->
          <!-- <a-button type="primary" class="ml-8" @click="logoutHandler">重新登录</a-button> -->
      </div>
    <a-modal
      title="截图"
      :visible="visible"
      :width="800"
      :footer="null"
      @cancel="handleCancel"
    >
     <img v-if="visibleIndex===1" src="@/assets/img/v2.jpg" alt="" >
     <img v-else src="@/assets/img/v1.jpg" alt="" >
    </a-modal>
    </div>
  </div>
</template>

<script>
import Config from "./typeConfig";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "ExceptionPage",
  props: ["type", "homeRoute"],
  data() {
    return {
      config: Config,
      visible:false,
      visibleIndex:1,
    };
  },
  computed: {
    ...mapGetters("user", ["menuList"]),
  },
  methods: {
    ...mapActions("user", ["logOut"]),
    checkImgHandler(index){
      this.visible = true
      this.visibleIndex = index
    },
    handleCancel(){
      this.visible = false
    },
    logoutHandler() {
      this.logOut();
    },
    backHome() {
      const a = ["机队状态", "事件监控", "资源工具", "故障历史"];
      if (this.menuList.findIndex((item) => item.title === a[0]) > -1) {
        this.$router.push("/fraMonitoring");
      } else if (this.menuList.findIndex((item) => item.title === a[1]) > -1) {
        this.$router.push("/eventMonitoring");
      } else if (this.menuList.findIndex((item) => item.title === a[2]) > -1) {
        this.$router.push("/resourceTool");
      } else if (
        this.menuList.findIndex(
          (item) => item.title === a[3] && item.level === 0
        ) > -1
      ) {
        this.$router.push("/eventHistory");
      } else {
        this.$router.push("/403");
      }
      this.$emit("backHome", this.type);
    },
  },
};
</script>

<style lang="less" scoped>
.exception-page {
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: @base-bg-color;
  .img {
    padding-right: 52px;
    zoom: 1;
    img {
      max-width: 430px;
    }
  }
  .content {
    h1 {
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    .desc {
      color: @text-color-second;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
  }
  .ex-notice {
    width: 600px;
  }
  .e403-img-box img {
    width: 300px;
    margin-right: 12px;
  }
}
</style>
